<template>
	<view>
		<u-navbar leftIconSize="0px" title="我的" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>

		<view class="bg-color" style="height:300rpx"></view>
		<view class="center-box mtlr30" style="padding-bottom: 50rpx;">
			
			<view class="mtlr30" style="display: flex;justify-content: space-between;">
				<view class="pt30">
					<view style="font-size: 50rpx;font-weight: 500;">潘高其</view>
					<view class="mt30">
						<span  class="userNumStyle">No.{{ userNum }}</span>
					</view>
					<view class="mt30 label-title " style="display: flex;align-items: center;">
						<view class="labelcolor">部门：</view>
						<view style="margin-left:50rpx">{{ userDepartment }}</view>
					</view>
					<view class="mt30 label-title " style="display: flex;align-items: center;">
						<view class="labelcolor">岗位：</view>
						<view style="margin-left:50rpx">{{ userPosition }}</view>
						<view style="margin-left: 20rpx;">
						<u-tag borderColor="#3ACD90" color="#3ACD90" text="兼职" type="success" plain></u-tag>
						</view>
					</view>
					<view class="mt30 label-title " style="display: flex;align-items: center;">
						<view class="labelcolor">辅导人：</view>
						<view style="margin-left:20rpx">{{ userOther }}</view>
					</view>
				</view>
				
				<view class="pt30">
					<u--image width="200rpx" height="200rpx" src="/static/image/head.png" shape="circle"></u--image>
				</view>

			</view>
		</view>
		

		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30">
					<view style="font-size: 40rpx;">常用功能</view>
				</view>
				<view class="mt30" >
					<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="use-icon" @click="logoutview">
						<view>
							<u--image width="80rpx" height="80rpx" src="/static/image/one.png" ></u--image>
						</view>
						<view style="font-size: 24rpx;">
							个人信息
						</view>
					</view>
					<view class="use-icon" @click="noticeview">
						<view>
							<u--image width="80rpx" height="80rpx" src="/static/image/two.png" ></u--image>
						</view>
						<view style="font-size: 24rpx;">
							消息中心
						</view>
					</view>
					<view class="use-icon" @click="renzheng">
						<view>
							<u--image width="80rpx" height="80rpx" src="/static/image/three.png"></u--image>
						</view>
						<view style="font-size: 24rpx;">
							认证信息
						</view>
					</view>
					<view class="use-icon" @click="gonghaoOpen">
						<view>
							<u--image width="80rpx" height="80rpx" src="/static/image/four.png" ></u--image>
						</view>
						<view style="font-size: 24rpx;">
							我的工号
						</view>
					</view>
					
					</view>
					
					<view style="display: flex;align-items: center;margin-top: 20rpx;justify-content: space-between;">
					<view class="use-icon" @click="visitShow">
						<view >
							<u--image width="80rpx" height="80rpx" src="/static/image/five.png"></u--image>
						</view>
						<view style="font-size: 24rpx;">
							店铺拜访
						</view>
					</view>
					<view class="use-icon" @click="mendianview" >
						<view >
							<u--image width="80rpx" height="80rpx" src="/static/image/mendian.png"></u--image>
						</view>
						<view style="font-size: 24rpx;">
							门店设置
						</view>
					</view>
					
					<view class="use-icon" @click="shoukuanview"  >
						<view>
							<u--image width="80rpx" height="80rpx" src="/static/image/shoukuan.png"></u--image>
						</view>
						<view style="font-size: 24rpx;">
							收款码管理
						</view>
					</view>
					
					<view class="use-icon" @click="zizhuview" >
						<view >
							<u--image width="80rpx" height="80rpx" src="/static/image/zizhu.png"></u--image>
						</view>
						<view style="font-size: 24rpx;">
							自助进件
						</view>
					</view>
					
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;" class="mtlr30 mt30">

				<u--image height="150rpx" width="350rpx" mode="scaleToFill" src="/static/image/daili.png"></u--image>
			
				<u--image height="150rpx" width="350rpx" mode="scaleToFill" src="/static/image/quyu.png"></u--image>

		</view>
		
		<u-popup :round="10" :show="gonghaoShow" mode="center"  @close="gonghaoClose" @open="gonghaoOpen" 
			:customStyle='{
				width:"560rpx",
				height:"700rpx",
				padding:"30rpx"
			}'
			:closeable="true"
			>
		        <view class="flex-center flex-chuizhi">
					<view style="margin-top:50rpx">
						<u--image mode="aspectFit" src="/static/image/code.png" width="450rpx" height="450rpx" radius=10 ></u--image>
					</view>
		            <view style="color:#7D7D7D;font-size:28rpx">我的工号</view>
					<view class="flex-center" style="display: flex;">
						<view class="fbold" style="font-size:48rpx;margin-left:80rpx">101924</view>
						<view style="margin-left:20rpx;color:#3ACD90">复制</view>
					</view>
					<view>
						<u-button @click="saveImg" color="#3ACD90" text="保存工号码" :hairline="true"></u-button>
					</view>
		        </view>
		</u-popup>
		
		<visitShopForm ref="childRef"></visitShopForm>
	</view>
	
	
	
</template>

<script>
import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
import visitShopForm from '@/components/visitShopForm.vue'
export default {
	components: {
		DaDropdownVue2,
		visitShopForm
	},
	data() {
		return {
			userNum:"101924",
			userDepartment:"商务十五部",
			userPosition:"初级商务",
			userOther:"章韩",
			gonghaoShow:false,
			

		}
	},
	methods: {
		visitShow() {
		    this.$refs.childRef.toggle();
		},
		logoutview(){
			this.$Router.push({
				path: '/pages/other/logout'
			})
		},
		renzheng(){
			this.$Router.push({
				path: '/pages/other/renzheng'
			})
		},
		gonghaoClose(){
			this.gonghaoShow = false
		},
		gonghaoOpen(){
			this.gonghaoShow = true
		},
		saveImg(){
			uni.saveImageToPhotosAlbum({
				filePath: '/static/image/four.png',
				success: function () {
					console.log('save success');
				}
			});
		},
		noticeview(){
			this.$Router.push({
				path: '/pages/other/notice'
			})
		},
		mendianview(){
			this.$Router.push({
				path: '/pages/other/mendian'
			})
		},
		shoukuanview(){
			this.$Router.push({
				path: '/pages/other/shoukuan'
			})
		},
		zizhuview(){
			this.$Router.push({
				path: '/pages/other/zizhu'
			})
		}
	}
}
</script>

<style scoped>
.center-box{
	background-color: #ffffff;
	margin-top: -250rpx;
	border-radius: 20rpx;	
}
.userNumStyle{
	background-color: #FF6C2C;
	color:#ffffff;
	border-radius: 10rpx;	
	padding:0 8rpx;
	
}
.center-second{
	margin-top: 20rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding-bottom: 40rpx;

}
.use-icon{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left:20rpx
}
</style>